<template>
	<view class="friend-group-page">
		<uni-nav-bar :border='false' @clickLeft='back()' color="var(--uni-text-color)" backgroundColor="transparent"
			:left-icon="isMobile && 'left' || ''" :leftText="isMobile && '返回' || ''" title="群聊" />
		<sxran-im-content>
			<uni-search-bar bgColor="var(--uni-bg-color-grey)" textColor='var(--uni-text-color)'
				@confirm="onSearchInput" v-model="words" placeholder='请输入用户名/用户昵称' @input="onSearchInput">
			</uni-search-bar>
			<view class="friend-group-body">
				<sxran-im-list>
						<template v-for="(item,index) in groupList">
							<view class="friend-group-item">
								<sxran-im-list-item :title='item.name' @change='onChange(item)'
									:avatarUrl='item.avatar'
									:key="index" :note='item.introduction' >
								</sxran-im-list-item>
							</view>
						</template>
				</sxran-im-list>
			</view>
		</sxran-im-content>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				words: ''
			}
		},
		computed: {
			isMobile() {
				return uni.$u.isMobile()
			},
			groupList() {
				return uni.$Im.getGroupList();
			}
		},
		created() {
			uni.$Im.getGroupListCmdMethods()
			// this.friensdsList = uni.$Im.getFriensdsList().map(item => {
			// 	return {
			// 		...item,
			// 		checked: false
			// 	}
			// });
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async onChange(value){
				//创建会话
				//好友列表创建会话
				const params = {
					"chatType": 1,
					"originalTo": value.groupId
				}
				uni.$Im.generateConversationId(params, (data) => {
					console.log(data)
					// #ifdef H5
					if (!uni.$u.isMobile()) {
						uni.$Im.setCurrentTab(1);
					}
					// #endif
					uni.$Im.getGroupInfosCmdMethods({
						groupId: data.groupId
					});
					uni.$Im.setCurrentConversationId(data.id);
					
					// #ifdef H5
					//检测是否为浏览器移动端
					if (uni.$u.isMobile()) {
						uni.navigateTo({
							url: `/uni_modules/sxran-im-modules/pages/chat/chat?id=${data.id}`
						})
					}
					this.$emit('change', '')
					// #endif
					
					
					// #ifndef H5
					uni.navigateTo({
						url: `/uni_modules/sxran-im-modules/pages/chat/chat?id=${data.id}`
					})
					// #endif
					
				})
				console.log(value, '---')
				// //更新会话ID
				// uni.$Im.setCurrentConversationId(value.groupId);
				// //根据会话id 获取会话信息
				// const conversation = uni.$Im.getConversationById(value.groupId);
				// uni.$Im.getConversationByIdMessageList({
				// 	"conversation": conversation.id,
				// 	"maxTime": Date.now(),
				// 	"offset": 1,
				// 	"count": 20,
				// }, (data) => {
				// 	uni.$Im.clearCurrentConversationUnreadCount(value.groupId)
				// })
				
				
			},
			//防抖搜索
			onSearchInput: uni.$u.debounce(function(words) {
				this.words = words
			}, 500)
		}
	}
</script>

<style scoped lang="scss">
	.friend-group-page {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));
	}

	.friend-group-foot {
		padding: 10px;
	}

	.friend-group-body {
		flex: 1 0 0;
		overflow: hidden;

		.friend-group-item {
			// border-radius: $uni-border-radius-lg;
			overflow: hidden;

			// margin-bottom: $uni-spacing-col-lg;
			// display: flex;
			// flex-direction: row;
			:deep(.sxran-im-cell) {
				background-color: transparent;
			}
		}

		.item-slot-rigt {
			display: flex;
			flex-direction: row;

			.u-text {
				margin: 0 10px !important;
			}
		}


	}
</style>